<template>
  <div>
    <!-- 搜索 -->
    <van-nav-bar left-arrow >
      <template #right >
        <div class="cityName"  @click="cityList">{{ touterIt + `▼` }}</div>
        <van-search
          v-model="value"
          show-action
          placeholder="| 🔍请输入小区地址"
          @search="onSearch"
          left-icon=""
          background="#21b97a"
        >
          <template #action> </template>
        </van-search>
        <van-icon name="map-marked" size="22" @click="map"/>
        <!-- <van-icon name="search" size="18" /> -->
      </template>
    </van-nav-bar>
    <!-- 筛选条件的列表 -->
    <!-- 把id传给筛选区域 -->
        <!-- <quYu :areas='touterValue'></quYu> -->
        <quYu></quYu>
    <div>
      <list></list>
      <!-- 加载状态 -->
      <!-- <div class="loading">
      <van-loading size="24px" vertical>加载中...</van-loading>
      </div> -->
    </div>
  </div>
</template>

<script>
import quYu from './components/quYu.vue'
import List from './List.vue'
export default {
  components: { List, quYu },
  data () {
    return {
      // 接收路由传参的城市名字
      touterIt: JSON.parse(localStorage.getItem('id')).label || '上海',
      // 接收路由传参的全部
      touterValue: '',
      value: '',
      active: 2,
      value1: 0,
      value2: 'a',
      option1: [
        {},
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }
      ]
    }
  },
  methods: {
    onSearch () {
      console.log(1)
    },
    cityList () {
      this.$router.replace('/CityList')
    },
    map () {
      this.$router.replace('/Map', 1)
    }
  }
  // created () {
  //   // 如果接受到了参数就是对象 就给值
  //   // if (this.$route.query.it instanceof Object) {
  //   //   this.touterIt = this.$route.query.it.label
  //   //   // this.touterValue是ID 然后把这个ID传给筛选组件
  //   //   this.touterValue = this.$route.query.it.value
  //   // }

  // }
}
</script >

<style lang="less" scoped>
.van-search {
  padding: 0;
  margin-right: 10px;
}
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}
/deep/ .van-nav-bar__content {
  background-color: #21b97a;
}
.van-icon {
  color: #fff;
}
/deep/ .van-icon-arrow-left {
  color: #fff;
}
.findList {
  background-color: pink;
  padding: 10px 0;
  border-bottom: 1px solid rgb(84, 83, 83);
  span {
    margin-right: 50px;
  }
}
.cityName {
  background-color: #f7f8fa;
  height: 33.97px;
  width: 60px;
  text-align: center;
  line-height: 33.97px;
}
.data-v-1d9b105c {
  height: 0;
}
.loading {
  padding-top: 20px;
  margin: 0 auto;
  background-color: #000;
  opacity: 0.5;
  width: 80px;
  height: 80px;
  border-radius: 7px;
  position: fixed;
  top: 280px;
  left: 150px;
}
</style>
